import { useEffect, useState } from "react";
// 1. 下载axios -> npm i axios
// 2. 引入axios
import axios from "axios";

import "./App.css";

export default function App() {
  const [movies, setMovies] = useState([]);
  // 初始化渲染触发
  useEffect(() => {
    // 3. 使用axios发送请求
    // axios({
    //   method: 'GET', // 请求方式
    //   url: 'http://localhost:3000/movies', // 请求地址
    //   // params: {}, // querystring 查询字符串参数
    //   // data: {}, // body 请求体参数
    //   // headers: {}, // 请求头
    // })

    // axios
    //   .get("http://localhost:3000/movies", {
    //     // params: {}, // querystring 查询字符串参数
    //     // data: {}, // body 请求体参数
    //     // headers: {}, // 请求头
    //   })
    //   .then()
    //   .catch();

    /*
      跨域：
        1. 为什么会跨域？
          违背了浏览器的同源策略，就会产生跨域
        2. 什么是同源策略？
          请求的地址：协议名、域名、端口号必须完全一致
          只要有一个不一样就会产生跨域
        3. 什么样的请求会跨域？
          只有浏览器端会跨域（只有浏览器有同源策略）
            -> 只有浏览器端的ajax请求会跨域
              浏览器的script、link、img等标签不会跨域
        4. 解决跨域方案
          jsonp 利用script跨域
            创建script标签
            设置src属性，添加callback参数
            设置callback回调函数
            将script标签添加到body生效
          cors 设置响应头 -> 一般用于线上环境
            access-control-allow-origin: *
          proxy 代理服务器 -> 只能用于开发环境
    */

    // useEffect接受的函数不能是异步函数
    const getMovies = async () => {
      try {
        // 需要再package.json配置"proxy": "http://localhost:3000"。启动代理解决跨域
        // const result = await axios.get("http://localhost:3001/movies");
        const result = await axios.get("/movies"); // 会自动补全当前服务器地址
        // 请求成功
        console.log("请求成功", result);
        setMovies(result.data.data);
      } catch (e) {
        // 请求失败
        console.log("请求失败", e);
      }
    };

    getMovies();
  }, []);

  return (
    <div>
      <h1 className="title">热门电影</h1>
      <ul className="movie-list">
        {movies.map((movie) => {
          return (
            <li key={movie.id} className="movie-item">
              <img src={movie.poster} alt={movie.title} />
              <p>{movie.title}</p>
              <p>评分: {movie.score}</p>
            </li>
          );
        })}
      </ul>
    </div>
  );
}
